<template>
    <div id="tmpl">
        <!--顶部 Search 区域-->
        <div class="searchbox">
            <div class="search_top">
                <a class="search_a" href="javascript:void (0)">
                    <span class="yk_logo"><img src="../../images/logo.png"></span>
                    <span class="search_ico"><img src="../../images/search_ico.png"></span>请输入您要搜索的商品
                </a>
            </div>
        </div>
        <!--轮播图-->
        <div class="topheight" style="visibility: hidden"></div>
        <mt-swipe class="swipe-index">
            <mt-swipe-item v-for="item in LunbotuList"><router-link :to="item.url"><img v-bind:src="item.img"></router-link></mt-swipe-item>
        </mt-swipe>
        <!--九宫格-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li v-for="item in CateList" class="mui-table-view-cell mui-media width5"> <router-link :to="item.url">
                <img :src="item.img">
                <div class="mui-media-body">{{item.title}}</div>
            </router-link></li>
        </ul>
        <!--banner-->
        <mt-swipe>
            <mt-swipe-item><img src="../../images/bigwheelbanner.jpg"></mt-swipe-item>
        </mt-swipe>
        <!--优客推荐-->
        <div class="wx_recommend">
            <div class="wx_recom_top">
                <div class="wx_recom_ico">
                    <span class="recomm_tit"><img src="../../images/yktjz_tit.png"></span>
                </div>
            </div>
            <div class="wx_recom_con flex">
                <div class="wx_recom_left" v-for="item in maxRecoPro" @click="godetail(item.id)">
                        <h3>{{item.title}}</h3>
                        <em>￥{{item.activeprice}}</em>
                        <img :src="item.img">
                </div>
                <div class="wx_recom_right">
                    <ul>
                        <li class="fn-clear" v-for="item in RecoPro">
                            <router-link to="/classify">
                                <div class="wx_recom_pro_tit">
                                    <h3>{{item.title}}</h3>
                                    <em>￥{{item.activeprice}}</em>
                                </div>
                                <img :src="item.img">
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--热销-->
        <div class="wx_hot_ranking_list">
            <a href="/index.php/Index/productList/type/hot.html">
                <img src="../../images/rexiao@2x.png">
            </a>
        </div>
        <!--活动专区入口-->
        <div class="wx_acition_list">
            <div class="product_zq"><a href="/index.php/ProductActive/prodActiveList.html"><img
                    src="../../images/action-banner1.jpg"></a>
            </div>
            <div class="product_zq" style="position: relative;">
                <a href="/index.php/Home/Area/showProdsHome/aid/100.html">
                    <img width="100%" src="../../images/dzzq-banner.jpg">
                    <div class="dzzq-tit" style="position: absolute;left:0;top:0;">
                        <img width="100%" src="../../images/dzzq.gif">
                    </div>
                </a>
            </div>
            <div class="product_zq" style="position: relative;">
                <a href="/index.php/Index/channel/id/5/type/cate.html">
                    <img width="100%" src="../../images/qdzq-banner.jpg">
                    <div class="dzzq-tit" style="position: absolute;left:0;top:0;">
                        <img width="100%" src="../../images/qdzq.gif">
                    </div>
                </a>
            </div>
        </div>
        <div class="wx-hot-com">
            <div class="wx_hot">
                <div class="wx_hot_top">
                    <a href="/index.php/Index/productList/id/2/type/cate.html"><img src="http://img.yokevip.com/upload/new/Admin/2017-07-30/597cd849bb0ec.jpg"></a>
                </div>
                <div class="wx_hot_list fn-clear">
                    <ul>
                        <li v-for="item in Prolist"><a href="/Weixin/Prods/info/id/12843" onclick="clickPruduct(12843)">
                            <div class="pro-img"><img :src="item.img">
                                <div class="discount-box"  v-show="item.hot">
                                    <span class="discout-label">活动价</span><span class="discout-price">{{item.activeprice}}</span></div>
                                <div class="fullcut-box" v-show="item.fullcut"></div>
                            </div>
                            <div class="pro-tit"><p class="tit">{{item.title}}</p>
                                <div class="pro-price">
                                    <div class="price_top"><span>专属价:<em>{{item.zsprice}}</em></span></div>
                                    <div class="price_bottom">
                                        <span>市场价:<em>{{item.scprice}}</em></span><span>网络价:<em>{{item.wlprice}}</em></span><span>销售量:<em>{{item.num}}</em></span>
                                    </div>
                                </div>
                            </div>
                        </a></li>
                    </ul>
                </div>
            </div>
            <div class="wx_hot">
                <div class="wx_hot_top">
                    <a href="/index.php/Index/productList/id/3/type/cate.html"><img
                            src="http://img.yokevip.com/upload/new/Admin/2017-07-30/597cd4b2c2f08.jpg"></a>
                </div>
                <div class="wx_hot_list fn-clear">
                    <ul>
                        <li v-for="item in Prolist"><a href="/Weixin/Prods/info/id/12843" onclick="clickPruduct(12843)">
                            <div class="pro-img"><img :src="item.img">
                                <div class="discount-box"  v-show="item.hot">
                                    <span class="discout-label">活动价</span><span class="discout-price">{{item.activeprice}}</span></div>
                                <div class="fullcut-box" v-show="item.fullcut"></div>
                            </div>
                            <div class="pro-tit"><p class="tit">{{item.title}}</p>
                                <div class="pro-price">
                                    <div class="price_top"><span>专属价:<em>{{item.zsprice}}</em></span></div>
                                    <div class="price_bottom">
                                        <span>市场价:<em>{{item.scprice}}</em></span><span>网络价:<em>{{item.wlprice}}</em></span><span>销售量:<em>{{item.num}}</em></span>
                                    </div>
                                </div>
                            </div>
                        </a></li>
                    </ul>
                </div>
            </div>
            <div class="wx_hot">
                <div class="wx_hot_top">
                    <a href="/index.php/Index/productList/id/4/type/cate.html"><img
                            src="http://img.yokevip.com/upload/new/Admin/2017-07-30/597cd54c3802a.jpg">
                    </a>
                </div>
                <div class="wx_hot_list fn-clear">
                    <ul>
                        <li v-for="item in Prolist"><a href="/Weixin/Prods/info/id/12843" onclick="clickPruduct(12843)">
                            <div class="pro-img"><img :src="item.img">
                                <div class="discount-box"  v-show="item.hot">
                                    <span class="discout-label">活动价</span><span class="discout-price">{{item.activeprice}}</span></div>
                                <div class="fullcut-box" v-show="item.fullcut"></div>
                            </div>
                            <div class="pro-tit"><p class="tit">{{item.title}}</p>
                                <div class="pro-price">
                                    <div class="price_top"><span>专属价:<em>{{item.zsprice}}</em></span></div>
                                    <div class="price_bottom">
                                        <span>市场价:<em>{{item.scprice}}</em></span><span>网络价:<em>{{item.wlprice}}</em></span><span>销售量:<em>{{item.num}}</em></span>
                                    </div>
                                </div>
                            </div>
                        </a></li>
                    </ul>
                </div>
            </div>
            <div class="wx_hot">
                <div class="wx_hot_list fn-clear">
                    <div class="wx_hot_top"
                         style="background-color: #FFF;color:#888; height: 44px; line-height: 44px; padding-left: 10px;margin-bottom: .5rem;">
                        更多商品
                    </div>
                    <ul id="itemList">

                        <li v-for="item in Prolist"><a href="/Weixin/Prods/info/id/12843" onclick="clickPruduct(12843)">
                            <div class="pro-img"><img :src="item.img">
                                <div class="discount-box"  v-show="item.hot">
                                    <span class="discout-label">活动价</span><span class="discout-price">{{item.activeprice}}</span></div>
                                <div class="fullcut-box" v-show="item.fullcut"></div>
                            </div>
                            <div class="pro-tit"><p class="tit">{{item.title}}</p>
                                <div class="pro-price">
                                    <div class="price_top"><span>专属价:<em>{{item.zsprice}}</em></span></div>
                                    <div class="price_bottom">
                                        <span>市场价:<em>{{item.scprice}}</em></span><span>网络价:<em>{{item.wlprice}}</em></span><span>销售量:<em>{{item.num}}</em></span>
                                    </div>
                                </div>
                            </div>
                        </a></li>
                    </ul>
                </div>
            </div>

        </div>
        <footnav></footnav>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                LunbotuList:[],
                CateList:[],
                Prolist:[],
                RecoPro:[],
                maxRecoPro:[]
            }
        },
        created() {
            this.getLunbotu();
            this.getCataList();
            this.getProList();
            this.getRecoPro();
        },
        methods: {
            getLunbotu() {
                this.$http.get("../src/data/lala.json").then( result => {
                    this.LunbotuList=result.body.data;
                });
            },
            getCataList() {
                this.$http.get("../src/data/cata.json").then( result => {
                    this.CateList=result.body.data;
                });
            },
            getProList() {
                this.$http.get("../src/data/prolist.json").then( result => {
                    this.Prolist=result.body.data;
                });
            },
            getRecoPro() {
                var newdata;
                this.$http.get("../src/data/RecoPro.json").then( result => {
                    newdata=result.body.data
                    newdata.sort(this.down);//将数据进行降序
                    this.RecoPro=newdata.slice(1,4);//截取排列完后的前三数据
                    this.maxRecoPro=newdata.slice(0,1)
                    console.log(this.RecoPro)
                });
            },
            godetail(id){
                this.$router.push({name:"goodsinfo",params:{id}});
            },
            //  降序排序
            down(x,y){
                return y.num-x.num;
            },
            //  升序序排序
            up(x,y){
                return x.num-y.num;
            }
        }
    }
</script>
<style scoped>

</style>